*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /*去除下划线*/
    text-decoration: none;
    /*去除<li>的点*/
    list-style: none;
}
/*设置biggest盒子内的通用样式*/
.biggest{
    /*设置外边框布局*/
    margin: 20px auto;
    /*设置盒子的背景为这个图片*/
    background-image: url(../img/10001.jpg);
}
/*设置当biggest盒子中p标签中的文字被鼠标悬浮时的样式*/
.biggest p:hover{
    /*当biggest盒子里面的p标签被鼠标悬浮时，p标签会有一个下划线*/
    text-decoration: underline;
    /*下划线的厚度设置*/
    text-decoration-thickness:0.2px;
    /*下划线的颜色设置*/
    text-decoration-color: #b0b0b0;
}
/*设置前言栏的样式*/
.itro{
    /*设置宽度为这个*/
    width: 1170px;
    /*设置外边款布局*/
    margin: 20px auto 10px;
    /*设置背景图片颜色为这个*/
    background-color: #fcfafa;
    /*设置边框参数*/
    border-bottom: solid 1px #e2dfd7;
    border-right: solid 1px #e2dfd7;
    box-shadow: 1px 1px 0 #f1eee5;
    /*设置内边框为这个*/
    padding: 5px;
}
/*设置前言栏中超链接标题h1的样式*/
.itro>a>h1{
    text-align: center;
    color: #000;
    font-size: 40px;
}
/*设置前言栏中超链接标题h1当被鼠标悬浮时的样式*/
.itro>a>h1:hover{
    color: red;
}

/* 为每个分隔栏设置样式 */
hr{
    width: 90%; /* 设置宽度为90% */
    margin: 3px auto; /* 设置上下边距为3px，左右自动居中 */
}

/* 为前言栏中的p标签设置样式 */
.itro>p{
    width: 90%; /* 设置宽度为90% */
    margin: 0 auto; /* 设置上下边距为0，左右自动居中 */
    text-indent: 1em; /* 设置首行缩进为1em */
}

/* 为下方每个菜系盒子设置为flex模式，并让其当一行装不下如此多的盒子时能让其换行 */
.flex-box{
    display: flex; /* 使用flex布局 */
    flex-wrap: wrap; /* 允许换行 */
    margin-left: 74.1px; /* 设置左边距 */
}

/* 为图片在下面的菜系盒子设置样式 */
.part-left{
    width: 49%; /* 设置宽度为49% */
    margin: 15px; /* 设置外边距为15px */
    height: 510px; /* 设置高度为510px */
    flex-basis: calc(23% - 20px); /* 设置弹性基础大小 */
    overflow: hidden; /* 隐藏溢出部分 */
    background-color: #fcfafa; /* 设置背景颜色 */
    border-bottom: solid 1px #e2dfd7; /* 设置底部边框 */
    border-right: solid 1px #e2dfd7; /* 设置右侧边框 */
    box-shadow: 1px 1px 0 #f1eee5; /* 设置阴影效果 */
}

/* 当图片在下的菜系盒子被鼠标悬浮时设置样式 */
.part-left:hover{
    margin-top: 10px; /* 设置顶部边距为10px */
    transition: transform 0.6s ease-in-out; /* 设置过渡效果 */
}

/* 选中所有菜系盒子中的标题，为其设置样式 */
a>h3{
    text-align: center; /* 设置文本居中 */
    color: black; /* 设置文字颜色为黑色 */
}

/* 当所有菜系盒子中的标题被鼠标悬浮时，发生的变化 */
h3:hover{
    color: gold; /* 设置文字颜色为金色 */
}

/* 为图片在上面的菜系盒子设置样式 */
.part-right{
    width: 49%; /* 设置宽度为49% */
    height: 510px; /* 设置高度为510px */
    margin: 15px; /* 设置外边距为15px */
    flex-basis: calc(22% - 20px); /* 设置弹性基础大小 */
    overflow: hidden; /* 隐藏溢出部分 */
    background-color: #fcfafa; /* 设置背景颜色 */
    border-bottom: solid 1px #e2dfd7; /* 设置底部边框 */
    border-right: solid 1px #e2dfd7; /* 设置右侧边框 */
    box-shadow: 1px 1px 0 #f1eee5; /* 设置阴影效果 */
}

/* 当图片在上的菜系盒子被鼠标悬浮时设置样式 */
.part-right:hover{
    margin-top: 10px; /* 设置顶部边距为10px */
    transition: transform 0.6s ease-in-out; /* 设置过渡效果 */
}

/* 为每个菜系盒子中的文字介绍部分，开头增加缩进 */
.font>p{
    text-indent:1em; /* 设置首行缩进为1em */
}

/* 为每个菜系盒子中的图片盒子设置样式 */
.image{
    overflow: hidden; /* 隐藏溢出部分 */
    margin: 20px 10px; /* 设置外边距 */
}

/* 让每个菜系盒子中的图片盒子中的图片占满图片盒子 */
.image>img{
    width: 100%; /* 设置宽度为100% */
    height: 100%; /* 设置高度为100% */
}

/* 为每个菜系盒子中的图片盒子中的图片设置当鼠标悬浮时样式 */
.image>img:hover{
    transform: scale(1.2); /* 设置放大倍数 */
    transition: transform 0.3s ease-in-out; /* 设置过渡效果 */
}

/* 顶部栏设计为flex布局 */
#top {
    display: flex; /* 使用flex布局 */
    margin: 1%; /* 设置外边距为1% */
}

/* 为顶部栏中的logo部分设置样式 */
#top > div {
    flex: 1; /* 设置弹性为1 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 设置主轴居中对齐 */
    align-items: center; /* 设置交叉轴居中对齐 */
}

/* 为中华传统美食这句话设置样式 */
#top > div > p {
    font-family: 楷体; /* 设置字体为楷体 */
    font-size: 35px; /* 设置字体大小为35px */
    font-weight: bold; /* 设置字体粗细为粗体 */
    text-align: center; /* 设置文本居中 */
    display: flex; /* 使用flex布局 */
    line-height: 100px; /* 设置行高为100px */
}

/* 为logo设置高度 */
#top > div > p > img {
    height: 100px; /* 设置高度为100px */
}

/* 中间搜索框 */
#top > label {
    flex: 1; /* 设置弹性为1 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 设置主轴居中对齐 */
    align-items: center; /* 设置交叉轴居中对齐 */
}

/* 搜索框的一些设置 */
#top > label > input {
    font-size: 18px; /* 设置字体大小为18px */
    height: 55%; /* 设置高度为55% */
    width: 60%; /* 设置宽度为60% */
}

/* 搜索按钮的设置 */
#top > label > button {
    height: 55%; /* 设置高度为55% */
    width: 15%; /* 设置宽度为15% */
}

/* 当搜索按钮被鼠标悬浮时的样式 */
#top > label > button:hover {
    cursor: pointer; /* 设置鼠标悬浮时的样式为手型 */
}

/* 导航栏设置样式part1 */
#top > ul {
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 设置主轴居中对齐 */
    align-items: center; /* 设置交叉轴居中对齐 */
    flex: 1.5; /* 设置弹性为1.5 */
}

/* 导航栏设置样式part2 */
#top > ul > li {
    border-radius: 10px; /* 设置边框半径为10px */
    text-align: center; /* 设置文本居中 */
    font-family: 楷体; /* 设置字体为楷体 */
    font-size: 20px; /* 设置字体大小为20px */
    padding: 3% 1% 3% 1%; /* 设置内边距 */
    flex: 1; /* 设置弹性为1 */
    font-weight: bold; /* 设置字体粗细为粗体 */
}

/* 当导航栏中的项目被鼠标悬浮时的样式 */
#top > ul > li:hover {
    cursor: pointer; /* 设置鼠标悬浮时的样式为手型 */
    color: white; /* 设置文字颜色为白色 */
    background-color: #999; /* 设置背景颜色为灰色 */
}

/* 底部栏的设置 */
footer {
    margin: 10% 0 3% 0; /* 设置外边距 */
    color: #999; /* 设置文字颜色为灰色 */
    text-align: center; /* 设置文本居中 */
}
